<template>
    <div class="mainMapContent">
        <!-- 这是上面图表二的 -->
        <div id="mainMap" style="height: 100%; width: 100%;"></div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
import tcJson from "../assets/map.json";
export default {
    data() {
        return {
            bigDataList: [],
            dongtaijson: tcJson,
        };
    },
    created() { },
    mounted() {
        this.getEcharts();
    },
    methods: {
        getEcharts() {
            var that = this
            const charEle = document.getElementById("mainMap");
            const charEch = echarts.init(charEle);
            // 检查地图是否已经注册
            if (!echarts.getMap("map")) {
                echarts.registerMap("map", { geoJSON: this.dongtaijson });
            }

            const options = {
                tooltip: {
                    trigger: "item",
                    formatter: function (params) {
                        return `${params.data.name}: ${params.value || "-"}`;
                    },
                },

                grid: {
                    left: "0px",
                    right: "80px",
                    top: "10px",
                    bottom: "10px",
                },
                geo: {
                    map: "map",
                    zoom: 1.1,
                    // 最小缩放
                    scaleLimit: {
                        min: 0.8,
                    },
                    label: {
                        color: "#fff",
                        show: true,
                        formatter: function (params) {
                            // 自定义标签内容，这里直接返回地名，你也可以添加更多内容或逻辑
                            return `${params.name}(镇长10人)`;
                        },
                    },
                    emphasis: {
                        label: {
                            color: "#fff",
                            show: true,
                        },
                        itemStyle: {
                            areaColor: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#073684", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#2B91B7", // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                    },
                    roam: true,
                    itemStyle: {
                        areaColor: "rgba(0, 0, 0, 0)", // 设置为透明色
                        borderColor: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "#00F6FF",
                                },
                                {
                                    offset: 1,
                                    color: "#87ADCB",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(10,76,139,1)",
                        shadowOffsetY: 0,
                        shadowBlur: 60,
                        borderWidth: 1,
                    },
                    tooltip: {
                        show: false,
                    },
                    // 添加立体效果
                    viewControl: {
                        distance: 100, // 地图视角的远近，默认为100
                        alpha: 30, // 地图视角绕 x 轴（左右旋转）的角度，默认为 30
                        beta: 0, // 地图视角绕 y 轴（上下旋转）的角度，默认为 0
                    },
                },
                series: [
                    {
                        name: "太仓地图",
                        type: "map",
                        map: "map", // 确保与地图的名称对应
                        geoIndex: 0, // 设置对应的 geoIndex
                        data: this.dongtaijson.features.map(item => {
                            return { name: item.properties.name, code: item.properties.adcode }
                        }),
                    },
                ],
            };
            charEch.setOption(options);
            charEch.on('click', async function (params) {

                let aaa = test
                let zm = []

                let zhenMap = {
                    type:'FeatureCollection',
                    features:[...zm]
                }
                // zhenMap.features
                aaa.features.map((it, index) => {
                    // console.log(aaa.features[0].properties.县,'aaaaaaaaaaaaaaa')
                    if (it.properties.县 == '昆山市') {
                        console.log(it, 'aaaaaaaaaaaaaaa')
                        zm.push(it)
                    }

                })
                var mapData = []
                zhenMap.features = zm
                if (params.componentType === 'series' && params.seriesType === 'map') {
                    var response = await fetch(`https://geo.datav.aliyun.com/areas_v3/bound/${params.data.code}_full.json`);
                    charEch.clear()
                    if (response.status == 200) {
                        var data = await response.json();
                        console.log(data, 'data')
                        console.log(zhenMap, 'zhenMap')

                        mapData = data.features.map(item => {
                            return { name: item.properties.name, code: item.properties.adcode }
                        })
                    } else {
                        mapData = zhenMap
                    }

                    charEch.resize()
                    echarts.registerMap("map", { geoJSON: data ? data : [] });
                    that.getEcharts()
                    charEch.setOption({
                        tooltip: {
                            trigger: "item",
                            formatter: function (params) {
                                return `${params.data.name}: ${params.value || "-"}`;
                            },
                        },

                        grid: {
                            left: "0px",
                            right: "0px",
                            top: "10px",
                            bottom: "10px",
                        },
                        geo: {
                            map: "map",
                            zoom: 1.2,
                            // 最小缩放
                            scaleLimit: {
                                min: 0.8,
                            },
                            label: {
                                color: "#fff",
                                show: true,
                            },
                            emphasis: {
                                label: {
                                    color: "#fff",
                                    show: true,
                                    formatter: function (params) {
                                        // 自定义标签内容，这里直接返回地名，你也可以添加更多内容或逻辑
                                        return `${params.name}(镇长10人)`;
                                    },
                                },
                                itemStyle: {
                                    areaColor: {
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#073684", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "#2B91B7", // 100% 处的颜色
                                            },
                                        ],
                                    },
                                },
                            },
                            roam: true,
                            itemStyle: {
                                areaColor: "rgba(0, 0, 0, 0)", // 设置为透明色
                                borderColor: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#00F6FF",
                                        },
                                        {
                                            offset: 1,
                                            color: "#87ADCB",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(10,76,139,1)",
                                shadowOffsetY: 0,
                                shadowBlur: 60,
                                borderWidth: 1,
                            },
                            tooltip: {
                                show: false,
                            },
                            // 添加立体效果
                            viewControl: {
                                distance: 100, // 地图视角的远近，默认为100
                                alpha: 30, // 地图视角绕 x 轴（左右旋转）的角度，默认为 30
                                beta: 0, // 地图视角绕 y 轴（上下旋转）的角度，默认为 0
                            },
                        },
                        series: [
                            {
                                name: "太仓地图",
                                type: "map",
                                map: "map", // 确保与地图的名称对应
                                geoIndex: 0, // 设置对应的 geoIndex
                                data: mapData
                            },
                        ],
                    }, true);
                }
            });
            console.log(charEch.getOption())
            return charEch;
        },
    },
};
</script>
  
<style>
.mainMapContent {
    width: 100vw;
    height: 100vh;
    font-size: 0.5rem;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: 0 0 / cover;
    background-color: #101129;
    background-color: #101129;
}
</style>